/*
 * @Author: xuetao 3168581151@qq.com
 * @Date: 2025-02-13
 * @LastEditors: xuetao 3168581151@qq.com
 * @LastEditTime: 2025-02-22
 * @Description:  下方带文本的图标按钮
 */

import 'package:flutter/material.dart';

class IconWithTextButton extends StatelessWidget {
  final IconData icon; // 图标
  final String label; // 下方的文本
  final double size; // 图标的大小
  final Color iconColor; // 图标的颜色
  final Color borderColor; // 边框颜色
  final double borderWidth; // 边框宽度
  final Function onPressed; // 按钮点击事件

  const IconWithTextButton({
    super.key,
    required this.icon,
    required this.label,
    this.size = 24.0,
    this.iconColor = Colors.black,
    this.borderColor = const Color(0xFFEDEDED),
    this.borderWidth = 2.0,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min, // 垂直方向适应内容
      children: [
        GestureDetector(
          onTap: () => onPressed(),
          child: Container(
            width: 2 * size, // 圆环宽度
            height: 2 * size, // 圆环高度
            decoration: BoxDecoration(
              shape: BoxShape.circle, // 圆形容器
              border: Border.all(
                color: borderColor, // 边框颜色
                width: borderWidth, // 边框宽度
              ),
            ),
            child: Icon(
              icon,
              color: iconColor, // 图标颜色
              size: size, // 图标大小
            ),
          ),
        ),
        SizedBox(height: 8), // 图标与文字之间的间距
        Text(
          label, // 显示的文本
          style: TextStyle(
            fontSize: 12, // 字体大小
            color: Colors.grey, // 字体颜色
          ),
        ),
      ],
    );
  }
}
